<template>
    <div class="wrap">
        <p class="login_title">短信登录</p>
        <div class="account">
            <span>手机号</span><input type="text" name=""  placeholder="请输入手机号">
        </div>
        <div class="password">
            <span>验证码</span><input type="text" name=""  placeholder="请输入验证码"><span class="getCode">获取验证码</span>
        </div>
        <div class="login_btn">
            <button>立即登录</button>
        </div>
        <div class="login_mode">
            <span @click="actLogin">账号密码登录</span><span class="go_register">没有账号 ？去<a href="">注册</a></span>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Login',
        methods: {
            actLogin: function () {
                this.$router.push({ path: '/login'})
            }
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .login_title{
        font-family: MicrosoftYaHei;
        font-size: 22px;
        color: #4C4C4C;
        letter-spacing: 3.3px;
        margin-top: 41.5px;
    }
    .account{
        margin-top: 60px;
        border-bottom: 1px solid #E7E7E7;
        padding-bottom: 10px;
    }
    .account span{
        font-size: 14px;
    }
    .account input{
        font-size: 14px;
        margin-left: 40px;
        width: 90px;
    }
    .password{
        margin-top: 41.5px;
        border-bottom: 1px solid #E7E7E7;
        padding-bottom: 10px;
    }
    .password span{
        font-size: 14px;
    }
    .password .getCode{
        border-left: 1px solid #979797;
        float: right;
        color: #169CF1;
        padding-left: 16px;
        height: 16px;
        line-height: 16px;
    }
    .password input{
        font-size: 14px;
        margin-left: 40px;
        width: 90px;
    }
    .login_btn{
        width: 100%;
        margin-top: 42px;
    }
    .login_btn button{
        width: 100%;
        height: 50px;
        border: none;
        color: #ffffff;
        background: #169CF1;
        border-radius: 25px;
        font-size: 15px;
    }
    .login_mode{
        margin-top: 20px;
        font-size: 14px;
        color: #4C4C4C;
    }
    .login_mode span:nth-child(2){
        float: right;
    }
    .login_mode a{
        color: #169CF1;
    }

</style>
